<template>
  <div class="keppel">
    <span class="browseCount">围观人数 {{browseCount}}</span>
    <span class="jionCount">中奖人数 {{joinCount}}</span>
    <div class="keppel_btns">
      <div class="main">
          <span @click="goMain">我要参加</span>
        <!-- <img src="http://assets.rurushishi.com/activies/tjkeppel/main.png" alt @click="goMain"> -->
      </div>
      <div class="btns">
        <img src="http://assets.rurushishi.com/activies/tjkeppel/rank.png" alt @click="goRank">
        <img src="http://assets.rurushishi.com/activies/tjkeppel/myprize.png" alt @click="goPrize">
        <img src="http://assets.rurushishi.com/activies/tjkeppel/rule.png" alt @click="goRuler">
      </div>
    </div>
    <div class="proList">
        <div class="nodata" v-if="showTips">
            <div class="showtip">暂无数据！</div>
        </div>
      <ul v-if="!showTips"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="20">
        <li v-for="(item, index) in upImgLists" :key="index">
          <img v-lazy="item.displayImg+'?x-oss-process=image/resize,h_400,w_200'" alt @click="catBig(index)">
          <div class="probtn">
            <span class="votes">投票数{{item.assistanceCount}}</span>
            <span class="catbtn" @click="actMore(item.openid)">
              <img src="http://assets.rurushishi.com/activies/tjkeppel/catInfo.png" alt>
            </span>
          </div>
        </li>
      </ul>
      <p class="no_more_data" v-show="!isShowLoadingIcon">没有更多数据了</p>
    </div>
    <div class="myswiper" v-show="isImg">
      <!-- <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(items, index) in upImgLists" :key="index"> -->
          <!-- <span class="clos" @click="clos">关闭</span>
          <img :src="items.displayImg+'?x-oss-process=image/resize,h_800,w_400'" alt :style="{height: height}" style="width:100%; paddingTop:10px;">
          <span class="catbtne" @click="actMores(items.openid)">
              <img src="http://assets.rurushishi.com/activies/tjkeppel/catInfo.png" alt>
         </span> -->
        <!-- </swiper-slide>
      </swiper> -->
      <span class="clos" @click="clos">关闭</span>
          <img :src="displayImgs+'?x-oss-process=image/resize,h_800,w_400'" alt :style="{height: height}" style="width:100%; paddingTop:10px;">
          <span class="catbtne" @click="actMores(openids)">
              <img src="http://assets.rurushishi.com/activies/tjkeppel/catInfo.png" alt>
         </span>
    </div>
    <div class="point">
      <img src="http://assets.rurushishi.com/activies/bgyAct/point_icon.png" alt>
    </div>
    <div class="mask" :style="{height: height}" v-show="ismask">
      <div class="maskUp">
        <div class="uptit">
          <img src="http://assets.rurushishi.com/activies/tjkeppel/uptit.png" alt>
        </div>
        <div class="upImg">
          <AliUpload :multiple="multiple" :id="id" :len="len" :url="url"></AliUpload>
          <img :src="url[0]" alt>
        </div>
        <div class="mskbtns">
          <img
            src="http://assets.rurushishi.com/activies/tjkeppel/upImgbtn.png"
            alt
            @click="upSucess"
          >
          <img src="http://assets.rurushishi.com/activies/tjkeppel/return.png" alt @click="close">
        </div>
      </div>
    </div>
    <div class="masks" v-show="ismasks">
      <div class="info">
        <p>恭喜你获得至多200元的随机话费！</p>
        <div class="mobile">
          <input
            type="text"
            placeholder="电话"
            v-model="mobile"
            @blur="blurInput"
            @focus="focusClick"
          >
        </div>
        <div class="vcode">
          <input
            type="text"
            placeholder="输入验证码"
            v-model="vcode"
            @blur="blurInput"
            @focus="focusClick"
          >
          <span v-show="!showVcode" @click="getVcode">{{getVcodes}}</span>
          <span v-show="showVcode">{{counts}}s</span>
        </div>
        <div class="btns">
          <span class="submit" @click="submit">提交</span>
          <span class="sclose" @click="sclose">关闭</span>
        </div>
        <!-- <div class="submit" @click="submit">提 交</div> -->
      </div>
    </div>
    <music></music>
    <share :isshare="isshare"></share>
    <!-- <Bottom :baseText="baseText"></Bottom> -->
  </div>
</template>
<script>
import utils from "@/utils/utils";
import Cookies from "js-cookie";
import { MessageBox } from "mint-ui";
// import { InfiniteScroll} from "mint-ui";
import request from "@/utils/request";
import * as config from "./config";
import music from "./components/music";
import Share from "@/components/common/Share";
// import Bottom from "@/components/common/Bottom";
import AliUpload from "@/components/common/AliUpload";
// import Vue from "vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      displayImgs: '',
      openids: '',
      browseCount:0,
      joinCount: 0,
      ismask: false, //是否参加 上传
      // 上传图片
      multiple: true,
      id: "1",
      len: 1,
      url: [],

      isJoinfos: false, //是否参加过活动
      group: "group",
      isshare: false, //是否分享
      baseText: config.BASE_TEXT,
      isplay: false,
      height: window.innerHeight+ "px",
      isImg: false, //查看详情
      saveInfo: {
        channel: "",
        nickname: "",
        openid: Cookies.get("openid"),
        reOpenid: "",
        headImg: "",
        six: ""
      },
      openid: Cookies.get("openid"),
      userInfo: null,
      // 接收到的传播信息
      receiveSpreadInfo: {
        channel: 0, //渠道
        fuid: "", //传播者的openid
        ouid: "" //销售或渠道的openid
      },
      upImgLists:[],
      loading: true, //infinite-scroll-disabled	若为真，则无限滚动不会被触发
      showTips: false,
      offset: 0,
      pageSize: 20,
      upImgList: [],
      isShowLoadingIcon:false,
      swiperOption: {
        direction: "vertical", //控制横向纵向
        height: window.innerHeight, // 高度设置，占满设备高度
        // effect: 'coverflow',
        effect: "flip", //设置切换效果
        loop: true //控制无限滚动
      },

      isFocus: false,
      mobile: "",
      vcode: "",
      showVcode: false,
      counts: "",
      timer: null,
      getVcodes: "获取验证码",
      ismasks: false,
      personal: 2
    };
  },
  components: {
    swiper,
    swiperSlide,
    share: Share,
    // Bottom: Bottom,
    music: music,
    AliUpload
  },
  methods: {
    loadMore() {
      this.rankLists();
    },
    rankLists(){
            let _self = this;
            request
                .get(
                    `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/joinUserList`,
                    {
                        offset: _self.offset,
                        // openid : _self.openid,
                        size: _self.pageSize,
                        // referenceOpenid: _self.receiveSpreadInfo.fuid
                    }
                )
                .then(function(data) {
                    if(data.code==0){
                        _self.loading = false;
                        _self.offset++;
                        if(data.data.total<=0){
                            _self.showTips = true
                            _self.loading = true;
                        }else {
                            _self.showTips = false;
                            _self.loading = false;
                            _self.upImgLists = _self.upImgLists.concat(data.data.list);
                            if (_self.upImgLists.length >= data.data.total) {
                                //无更多数据
                                _self.loading = true;
                                _self.isShowLoadingIcon=false;
                            }
                        }
                    }
            });
    },
    goMain() {
      let _self = this;
      _self.userJoinfo();
    },
    goPrize() {
      this.pushUrl("prize");
    },
    goRank() {
      this.pushUrl("rank");
    },
    goRuler() {
      this.pushUrl("rule");
    },
    //查看大图
    catBig(ids) {
        // console.log(ids)
        // alert(ids)
      let _self = this;
      _self.upImgList = [];
      console.log(_self.upImgLists[ids]);
     _self.displayImgs =_self.upImgLists[ids].displayImg;
     _self.openids = _self.upImgLists[ids].openid;
    //  _self.upImgList.unshift(_self.upImgLists[ids]);
         
      // _self.upImgList = _self.upImgList.concat(_self.upImgLists);
    //   this.$refs.mySwiper.swiper.slideTo(ids, 0, false);
      _self.isImg = true;
    },

    clos(){
        this.isImg = false;
    },
    //查看更多
    actMore(openid) {
        this.pushUrl("main", openid)
    },
    actMores(openid){
        this.pushUrl("main", openid)
    },
    focusClick(e) {
      this.isFocus = true;
      if (utils.browser.versions.ios) {
        setTimeout(function() {
          e.target.scrollIntoView(true);
        }, 100);
      }
    },
    blurInput(e) {
      this.isFocus = false;
      this.$nextTick(() => {
        if (utils.browser.versions.ios && !this.isFocus) {
          setTimeout(function() {
            e.target.scrollIntoView(false);
          }, 300);
        }
      });
    },
    //获取手机验证码/activity/logic/takeMobileVerifyCode
    getActPhoneVCode() {
      const _self = this;
      if (!_self.mobile) {
        return MessageBox.alert("请输入手机号", "提示");
      } else {
        request
          .get(
            `${
              _self.global.API_TJKEPPEL_ACT_URL
            }activity/logic/takeMobileVerifyCode`,
            {
              mobile: _self.mobile
            }
          )
          .then(function(data) {});
      }
    },

    getVcode() {
      const _self = this;
      const TIME_COUNT = 60;
      _self.getActPhoneVCode();
      if (!_self.timer && _self.mobile) {
        _self.counts = TIME_COUNT;
        _self.showVcode = true;
        _self.timer = setInterval(() => {
          if (_self.counts > 0 && _self.counts <= TIME_COUNT) {
            _self.counts--;
          } else {
            _self.showVcode = false;
            _self.getVcodes = "重新获取";
            clearInterval(_self.timer);
            _self.timer = null;
          }
        }, 1000);
      }
    },
    //提交手机号
    submit() {
      let _self = this;
      if (!_self.mobile) {
        return MessageBox.alert("请输入手机号", "提示");
      } else {
        if (!utils.isMobile(_self.mobile)) {
          return MessageBox.alert("请填写正确的手机号", "提示");
        }
      }
      if (!_self.vcode) {
        return MessageBox.alert("请输入验证码", "提示");
      }
      let query = {
        mobile: _self.mobile,
        verCode: _self.vcode,
        prizeCode: "prize_3"
      };
      let obj = JSON.stringify(query);
      request
        .post(
          `${
            _self.global.API_TJKEPPEL_ACT_URL
          }activity/logic/takeTelFareAndCheckVCode`,
          obj
        )
        .then(function(data) {
          MessageBox.alert("话费稍后会发送到你的手机！", "提示").then(
            function() {
             config.addUserInfoWithPhoneAndBindRegister(
                _self.receiveSpreadInfo.ouid,
                _self.openid,
                _self.mobile,
                name
            );
              _self.ismasks = false;
              _self.pushUrl("main",_self.personal);
            }
          );
        });
    },
    sclose() {
      this.ismasks = false;
    },
    //上传成功 参加活动
    upSucess() {
      this.joinAct();
    },

    //返回首页
    close() {
      this.ismask = false;
    },
    // 获取参与者用户的活动信息/activity/logic/userJoinfo
    userJoinfo() {
      let _self = this;
      request
        .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/userJoinfo`, {
          //    openid: _self.saveInfo.openid,
        })
        .then(function(data) {
          if (!data.data) {
            _self.ismask = true;
          } else {
            _self.ismask = false;
            // 跳转个人主页
            // alert(_self.receiveSpreadInfo.fuid)
            _self.pushUrl("main",_self.personal);
            // _self.$router.push({path:'main', query:{channel:_self.eceiveSpreadInfo.channel, fuid: Cookies.get("openid")}});
          }
        });
    },
   
    // 是否参加过活动
    isJoinfo() {
      let _self = this;
      request
        .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/userJoinfo`, {
          //    openid: _self.saveInfo.openid,
        })
        .then(function(data) {
            // &&data.data.displayImg
          if (!data.data) {
            //没有参加过活动
            _self.isJoinfos = false;
            _self.init();
          } else {
            _self.isJoinfos = true; //参加过活动
            _self.init();
          }
        });
    },
    // 参与活动/activity/logic/joinAct
    joinAct() {
      let _self = this;
      if (!_self.url[0]) {
        return MessageBox.alert("请先上传照片！", "提示");
      }
      let query = {
        channel: _self.saveInfo.channel,
        displayImg: _self.url[0],
        referenceOpenid: _self.saveInfo.reOpenid
      };
      let obj = JSON.stringify(query);
      request
        .post(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/joinAct`,
        obj 
        // {
        //   channel: 1,
        //   displayImg: _self.url[0]
        // }
        )
        .then(function(data) {
          if (data.code == 0) {
            MessageBox.alert("参与活动成功！", "提示").then(function() {
              _self.ismask = false;
              _self.userfare();
            });
          }
        });
    },
     // /activity/logic/getUserPrize是否领取过话费
        userfare(){
            let _self =this;
            request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/getUserPrize`,
                {
                    prizeCode: 'prize_3',
                }).then(function(data){
                    if(!data.data){
                        //   是否在活动区域
                        request
                            .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/checkValidIp`, {
                            //    openid: _self.saveInfo.openid,
                            })
                            .then(function(data) {
                            if (data.data) {
                                _self.ismask = true;
                            } else {
                                // MessageBox.alert("不在活动区域！", "提示")
                                _self.ismasks =false;
                                _self.pushUrl("main",_self.personal);
                            }
                            });
                          _self.ismasks =true;

                    }else{
                        _self.ismasks =false;
                        _self.pushUrl("main",_self.personal);
                    } 
                });
        },
    // /activity/logic/addBrowseCount 记录活动浏览量
    addBrowseCount() {
      let _self = this;
      request
        .get(
          `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/addBrowseCount`,
          {}
        )
        .then(function(data) {});
    },
    //获取活动信息/activity/logic/actInfo
    actInfo() {
      let _self = this;
      request
        .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/actInfo`, {})
        .then(function(data) {
          // resolve(data);
          _self.browseCount = data.data.browseCount;//浏览人数
           _self.joinCount= data.data.gotPrizeCount;
        });
    },
    // 保存用户信息/activity/logic/saveUserInfo
    saveUserInfo() {
      let _self = this;
      let query = {
        channel: _self.saveInfo.channel,
        headImg: _self.saveInfo.headImg,
        sex: _self.saveInfo.six,
        nickname: _self.saveInfo.nickname,
        // openid: Cookies.get('openid'),
        referenceOpenid: _self.saveInfo.reOpenid
      };
      let obj = JSON.stringify(query);
      request
        .post(
          `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/saveUserInfo`,
          obj
        )
        .then(function(data) {
          // resolve(data);
        });
    },
    //分享回调 /activity/logic/share
    shareCallBack() {
      let _self = this;
      let query = {
        channel: _self.saveInfo.channel,
        openid: _self.saveInfo.openid,
        prizeCode: "prize_1",
        referenceOpenid: _self.saveInfo.reOpenid
      };
      let obj = JSON.stringify(query);
      request
        .post(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/share`, obj,{needDealEx:false})
        .then(function(data) {
          if (data.code == 0) {
            this.isshare = false;
          }
        });
    },
    pushUrl(page, id) {
      // 带上本页面的传播信息
      let url = "";
      let fullPathNoShare = this.$route.fullPath;
      fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
      fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
      fullPathNoShare = fullPathNoShare.replace("?personal=2", "");
      fullPathNoShare = fullPathNoShare.replace("&personal=2", "");
      if(id){
          if (fullPathNoShare.indexOf("?") > -1) {
                url = page + "?" + fullPathNoShare.split("?")[1]+"&personal="+ id;
            } else {
                url = page+"&personal="+ id;
            }
      }else{
          if (fullPathNoShare.indexOf("?") > -1) {
                url = page + "?" + fullPathNoShare.split("?")[1];
            } else {
                url = page;
            }
      }
      
      this.$router.push("/" + url);
    },
    init() {
      let that = this;
      // 设置传播信息
      if (this.$route.query.channel)
        this.receiveSpreadInfo.channel = this.$route.query.channel;
      this.saveInfo.channel = this.$route.query.channel;
      if (this.$route.query.fuid)
        this.receiveSpreadInfo.fuid = this.$route.query.fuid;
      this.saveInfo.reOpenid = this.$route.query.fuid;
      if (this.$route.query.ouid)
        this.receiveSpreadInfo.ouid = this.$route.query.ouid;
      if (this.$route.query.isshare) that.isshare = true;
      config.getUserInfo().then(function(userInfo) {
        console.log(userInfo);
        that.userInfo = userInfo;
        // 设置分享 标题 链接 回调
        let shareObj = {
          title: "",
          link: ""
        };
        if (
          that.userInfo &&
          that.userInfo.user &&
          that.userInfo.user.nickname
        ) {
          that.saveInfo.nickname = that.userInfo.user.nickname;
          that.saveInfo.six = that.userInfo.user.sex;
          that.saveInfo.headImg = that.userInfo.user.headimgurl;
          shareObj.title = `${
            that.userInfo.user.nickname
          }520告白日｜怦然心动，你的“美”一刻”`;
        }
        console.log(that.isJoinfos);
        if (that.userInfo.salerOrAgent && that.isJoinfos) {
          // 是销售或者渠道,更新ouid
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}&ouid=${that.openid}`;
        } else if (!that.isJoinfos) {
          //没有参加活动直接分享的
          shareObj.link = `${config.SHARE_NOJOIN_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}${
            that.receiveSpreadInfo.ouid
              ? "&ouid=" + that.receiveSpreadInfo.ouid
              : ""
          }`;
        } else {
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}${
            that.receiveSpreadInfo.ouid
              ? "&ouid=" + that.receiveSpreadInfo.ouid
              : ""
          }`;
        }
        that.saveUserInfo();
        config.initShare(shareObj);
        that.global.SHARE_CALLBACK_OK = function(type) {
          that.shareCallBack();
        };
      });
    }
  },
  // beforeCreate(){
  //      this.isJoinfo();
  // },
  created() {
    this.isJoinfo();
  },
  mounted() {
    this.loadMore() 
    this.actInfo();
    this.addBrowseCount();
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl';
.keppel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 13.29rem;
  background: url('http://assets.rurushishi.com/activies/tjkeppel/index.jpg') no-repeat; 
  background-size: 100% 100%;
}

.keppel_btns {
  width: 100%;
  position: absolute;
  top: 7rem;
}
.browseCount{
  display block
  width: 50%;
  position: absolute;
  top: 1rem;
  left 40%
  text-align center
  color #ffffff
  height .5rem
}
.jionCount{
   display block
  width: 50%;
  position: absolute;
  top: 1.5rem;
  left 40%
  text-align center
  color #ffffff
  height .5rem 
}
.main {
  width: 100%;
  display: flex;
  justify-content: center;
  animation swing 2s infinite
}

.main>span { 
  display block
  background linear-gradient(to top right, #f7e0a7, #d69f57);
  color #ffffff
  font-size .26rem
  line-height .5rem
  text-align center   
  width: 2.66rem;
  height: 0.5rem;
  border-radius 2px
}

.btns {
  padding-top: 0.3rem;
  margin: 0 auto;
  width: 92%;
  display: flex;
  justify-content: space-around;
}

.btns>img {
  width: 2.21rem;
  height: 0.73rem;
}

// 上传图片的展示
.proList {
  position: absolute;
  top: 13.29rem;
  width: 100%;
  background: url('http://assets.rurushishi.com/activies/tjkeppel/1.1.jpg') no-repeat;
  background-size: 100% 100%;
}

.proList>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-height 14rem
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}

.proList>ul>li {
  padding: 0.3rem 0.1rem;
  box-sizing: border-box;
  width: 50%;
  height 3.3rem;
  text-align: center;
}

.proList>ul>li>img {
  width: 3rem;
  height: 2.5rem;
  margin: 0 auto;
}

.proList>ul>li .probtn {
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.proList>ul>li .probtn>span {
  display: block;
}

.proList>ul>li .probtn .votes {
  width: 2rem;
  height: 0.73rem;
  color: #fff;
  line-height: 0.73rem;
  font-size: 0.24rem;
}

.proList>ul>li .probtn .catbtn>img {
  width: 1.89rem;
  height: 0.73rem;
}

.myswiper {
  width: 100%;
  height: 100%;
  background #000
  position: fixed;
  top: 0;
  left: 0;
}

.point {
  width: 100%;
  height: 1rem;
  text-align: center;
}

.point>img {
  animation: beat 1s infinite;
  width: 0.34rem;
  height: 0.58rem;
  position: fixed;
  bottom: 0.3rem;
  z-index: 5;
}

@keyframes beat {
  25% {
    transform: translateY(0.2rem);
  }

  50%, 100% {
    transform: translateY(0rem);
  }

  75% {
    transform: translateY(0.2rem);
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.9;
  z-index: 6;
}

.maskUp {
  width: 100%;
  padding-top: 2rem;
}

.maskUp .uptit {
  text-align: center;
  width: 100%;
  height: 1.2rem;
}

.maskUp .uptit>img {
  width: 2.7rem;
  height: 0.8rem;
}

.maskUp .upImg {
  position: relative;
  width: 5.64rem;
  height: 3.57rem;
  margin: 0 auto;
  background: url('http://assets.rurushishi.com/activies/tjkeppel/upimg.png') no-repeat; // assets.rurushishi.com/activies/tjkeppel/upimg.png) no-repeat
  background-size: 100% 100%;
}

.maskUp .upImg>img {
  width: 100%;
  height: 100%;
}

.maskUp .mskbtns {
  padding-top: 0.5rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.maskUp .mskbtns>img {
  width: 3.14rem;
  height: 0.93rem;
}

.masks {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.9;
  z-index: 6;
}

.info {
  background: #47ab08;
  width: 80%;
  padding: 0.5rem 0;
  margin-left: 10%;
  margin-top: 40%;
}

.info>p {
  width: 100%;
  text-align: center;
  font-size: 0.28rem;
  color: #ffffff;
}

.vcode {
  margin: 0.2rem auto;
  height: 0.8rem;
  width: 70%;
  border: 1px solid #fff;
  border-radius: 0.2rem;
}

.vcode>input {
  width: 50%;
}

.vcode>span {
  display: inline-table;
  line-height: 0.8rem;
  width: 42%;
  font-size: 0.32rem;
  height: 0.8rem;
  color: #fff;
  text-align: center;
}

.info .mobile {
  margin: 0.2rem auto;
  height: 0.8rem;
  width: 70%;
  border: 1px solid #fff;
  border-radius: 0.2rem;
}

input {
  color: #fff;
  width: 92%;
  padding-left: 6%;
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: transparent;
  border: none;
}

.btns {
  display: flex;
  justify-content: space-around;
}

.btns .submit {
  width: 30%;
  background-color: #da9d55;
  border-radius: 0.4rem;
  font-size: 0.32rem;
  height: 0.8rem;
  margin: 0.2rem auto;
  text-align: center;
  line-height: 0.8rem;
  color: #fff;
}

.btns .sclose {
  width: 30%;
  background-color: #da9d55;
  border-radius: 0.4rem;
  font-size: 0.32rem;
  height: 0.8rem;
  margin: 0.2rem auto;
  text-align: center;
  line-height: 0.8rem;
  color: #fff;
}
.clos{
    position absolute
    top 0.2rem
    color #fff
    right 0.2rem
    display block
    width 1.3rem
    height .5rem
    line-height .5rem
    text-align center
    border 1px solid #fadeaa
}
.catbtne{
    display: block;
    position: absolute;
    bottom: 1.3rem;
    left: 50%;
    margin-left: -1.8rem;
}
@keyframes swing {
  0% {
    transform: rotate(0);
  }

  5% {
    transform: rotate(10deg);
  }

  10% {
    transform: rotate(-9deg);
  }

  15% {
    transform: rotate(8deg);
  }

  20% {
    transform: rotate(-7deg);
  }

  25% {
    transform: rotate(6deg);
  }

  30% {
    transform: rotate(-5deg);
  }

  35% {
    transform: rotate(4deg);
  }

  40% {
    transform: rotate(-3deg);
  }

  45% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.no_more_data{
    color #fff
    text-align center
}
</style>

